$palette-blue: (
  'primary': #1565c0,
  'primary-dark': #003c8f,
  'primary-light': #5e92f3,
  'on-primary': #fff,
);

$palette-blue-gray: (
  'primary': #37474f,
  'primary-dark': #102027,
  'primary-light': #62727b,
  'on-primary': #fff,
);

$palette-brown: (
  'primary': #5d4037,
  'primary-dark': #321911,
  'primary-light': #8b6b61,
  'on-primary': #fff,
);

$palette-cyan: (
  'primary': #00838f,
  'primary-dark': #005662,
  'primary-light': #4fb3bf,
  'on-primary': #fff,
);

$palette-green: (
  'primary': #2e7d32,
  'primary-dark': #005005,
  'primary-light': #60ad5e,
  'on-primary': #fff,
);

$palette-indigo: (
  'primary': #303f9f,
  'primary-dark': #001970,
  'primary-light': #666ad1,
  'on-primary': #fff,
);

$palette-orange: (
  'primary': #bb4d00,
  'primary-dark': #b53d00,
  'primary-light': #ffad42,
  'on-primary': #fff,
);

$palette-pink: (
  'primary': #c2185b,
  'primary-dark': #8c0032,
  'primary-light': #fa5788,
  'on-primary': #fff,
);

$palette-purple: (
  'primary': #7b1fa2,
  'primary-dark': #4a0072,
  'primary-light': #ae52d4,
  'on-primary': #fff,
);

$palette-red: (
  'primary': #d32f2f,
  'primary-dark': #9a0007,
  'primary-light': #ff6659,
  'on-primary': #fff,
);

$palette-teal: (
  'primary': #00796b,
  'primary-dark': #004c40,
  'primary-light': #48a999,
  'on-primary': #fff,
);

$palette-yellow: (
  'primary': #bc5100,
  'primary-dark': #833900,
  'primary-light': #ffb04c,
  'on-primary': #fff,
);

$palettes: (
  'blue': $palette-blue,
  'blue-gray': $palette-blue-gray,
  'brown': $palette-brown,
  'cyan': $palette-cyan,
  'green': $palette-green,
  'indigo': $palette-indigo,
  'orange': $palette-orange,
  'pink': $palette-pink,
  'purple': $palette-purple,
  'red': $palette-red,
  'teal': $palette-teal,
  'yellow': $palette-yellow,
);

@each $name, $colors in $palettes {
  [data-palette='#{$name}'] {
    @each $key, $color in $colors {
      --hbs-#{$key}: #{$color};
    }
  }
}

.palette {
  height: 1.5rem;
  min-width: 1.5rem;
  margin: 0.25rem 0;
  background: variable('primary') !important;
  color: variable('on-primary') !important;

  &:not(:last-child) {
    margin-right: .25rem;
  }
}

#palettePicker {
  overflow-y: scroll;
}

.text-accent {
  color: variable('accent') !important;
}
